
<template>
    <div class="rm_AdvancedSearch">
        <el-button :type="btnType" @click="dialog = true">
            <span>高级查询</span>
        </el-button>

        <el-drawer title="高级查询" :before-close="cancelForm" :visible.sync="dialog" :append-to-body="true" direction="rtl"
            custom-class="drawer" ref="drawer">
            <div class="drawer__content">
                <el-form style="white-space:nowrap;" class="drawer__form">
                    <div :key="group.groupName" v-for="group in curr_jsonObj">
                        <div class="group">
                            <span class="groupspan">{{ group.groupName }}</span>
                        </div>
                        <table width="100%" style="border-collapse:separate; border-spacing:0px 1px;">
                            <template v-for="block in group.subList">
                                <tr v-if="block.dbrow == 2" :key="block._tid" class="drawer_tr">
                                    <td class="drawer_td"
                                        style="text-align:right; vertical-align:middle; padding-right: 20px; width: 20%;">
                                        {{ block.item[0].text }}
                                    </td>
                                    <td class="drawer_td" style="width: 30%; text-align: left;">
                                        <component :is="block.item[0].component" v-if="block.item[0].type === '1'"
                                            @dblclick.native="dbClickMethod($event, block.item[0].dblclickparm)"
                                            @changeObj="showChangeVal($event, block.item[0].component, block.item[0].text, block.item[0].returnParm)"
                                            :ref=block.item[0].returnParm
                                            v-bind="block.item[0].pops" v-model="block.item[0].val"
                                            :key="block.item[0]._uid">
                                        </component>

                                        <el-select v-else-if="block.item[0].type === '2'" v-model="block.item[0].val"
                                            v-bind="block.item[0].pops"
                                            @dblclick.native="dbClickMethod($event, block.item[0].dblclickparm)"
                                            @change="showChangeVal(block.item[0].val, block.item[0].component, block.item[0].text, block.item[0].returnParm)"
                                            :ref=block.item[0].returnParm
                                            :key="block.item[0]._uid + '2'">
                                            <el-option v-for="item in block.item[0].selectOptions" :key="item.value"
                                                :label="item.label" :value="item.value"></el-option>
                                        </el-select>

                                        <el-checkbox v-else-if="block.item[0].type === '3'" v-model="block.item[0].val" v-bind="block.item[0].pops"
                                            @change="showChangeVal($event, block.item[0].component, block.item[0].checkboxText, block.item[0].returnParm)"
                                            :ref=block.item[0].returnParm
                                            :key="block.item[0]._uid + '3'">
                                            {{block.item[0].checkboxText}}
                                        </el-checkbox>

                                        <el-input v-else v-model="block.item[0].val" v-bind="block.item[0].pops"
                                            @dblclick.native="dbClickMethod($event, block.item[0].dblclickparm)"
                                            @change="showChangeVal($event, block.item[0].component, block.item[0].text, block.item[0].returnParm)"
                                            :ref=block.item[0].returnParm
                                            :key="block.item[0]._uid + '4'">
                                        </el-input>
                                    </td>
                                    <td class="drawer_td"
                                        style="text-align:right; vertical-align:middle; padding-right: 20px; width: 20%;">
                                        {{ block.item[1].text }}
                                    </td>
                                    <td class="drawer_td" style="width: 30%; text-align: left;">
                                        <component :is="block.item[1].component" v-if="block.item[1].type === '1'"
                                            v-bind="block.item[1].pops"
                                            @dblclick.native="dbClickMethod($event, block.item[1].dblclickparm)"
                                            @changeObj="showChangeVal($event, block.item[1].component, block.item[1].text, block.item[1].returnParm)"
                                            :ref=block.item[1].returnParm
                                            v-model="block.item[1].val"
                                            :key="block.item[1]._uid">
                                        </component>

                                        <el-select v-else-if="block.item[1].type === '2'" v-model="block.item[1].val"
                                            v-bind="block.item[1].pops"
                                            @dblclick.native="dbClickMethod($event, block.item[1].dblclickparm)"
                                            @change="showChangeVal(block.item[1].val, block.item[1].component, block.item[1].text, block.item[1].returnParm)"
                                            :ref=block.item[1].returnParm
                                            :key="block.item[1]._uid + '2'">
                                            <el-option v-for="item in block.item[1].selectOptions" :key="item.value"
                                                :label="item.label" :value="item.value"></el-option>
                                        </el-select>

                                        <el-checkbox v-else-if="block.item[1].type === '3'" v-model="block.item[1].val" v-bind="block.item[1].pops"
                                            @change="showChangeVal($event, block.item[1].component, block.item[1].checkboxText, block.item[1].returnParm)"
                                            :ref=block.item[1].returnParm
                                            :key="block.item[1]._uid + '3'">
                                            {{block.item[1].checkboxText}}
                                        </el-checkbox>

                                        <el-input v-else v-model="block.item[1].val" v-bind="block.item[1].pops"
                                            @dblclick.native="dbClickMethod($event, block.item[1].dblclickparm)"
                                            @change="showChangeVal($event, block.item[1].component, block.item[1].text, block.item[1].returnParm)"
                                            :ref=block.item[1].returnParm
                                            :key="block.item[1]._uid + '4'">
                                        </el-input>
                                    </td>
                                </tr>
                                <tr v-else :key="block._tid + '1'" class="drawer_tr">
                                    <td class="drawer_td"
                                        style="text-align:right; vertical-align:middle; padding-right: 20px; width: 30%;">
                                        {{ block.text }}
                                    </td>
                                    <td class="drawer_td" style="width: 60%; text-align: left;">
                                        <component :is="block.component" v-if="block.type === '1'" v-bind="block.pops"
                                            v-model="block.val"
                                            @dblclick.native="dbClickMethod($event, block.dblclickparm)"
                                            @changeObj="showChangeVal($event, block.component, block.text, block.returnParm)"
                                            :ref=block.returnParm
                                            :key="block._uid">
                                        </component>

                                        <el-select v-else-if="block.type === '2'" v-model="block.val" v-bind="block.pops"
                                            @dblclick.native="dbClickMethod($event, block.dblclickparm)"
                                            @change="showChangeVal(block.val, block.component, block.text, block.returnParm)"
                                            :ref=block.returnParm
                                            :key="block._uid + '2'">
                                            <el-option v-for="item in block.selectOptions" :key="item.value"
                                                :label="item.label" :value="item.value"></el-option>
                                        </el-select>

                                        <el-checkbox v-else-if="block.type === '3'" v-model="block.val" v-bind="block.pops"
                                            @change="showChangeVal($event, block.component, block.checkboxText, block.returnParm)"
                                            :ref=block.returnParm
                                            :key="block._uid + '3'">
                                            {{block.checkboxText}}
                                        </el-checkbox>

                                        <el-input v-else v-model="block.val" v-bind="block.pops"
                                            @dblclick.native="dbClickMethod($event, block.dblclickparm)"
                                            @change="showChangeVal($event, block.component, block.text, block.returnParm)"
                                            :ref=block.returnParm
                                            :key="block._uid + '4'">
                                        </el-input>
                                    </td>
                                </tr>
                            </template>
                        </table>
                    </div>
                </el-form>
                <div class="drawer__footer">
                    <el-button type="primary" @click="returnResult" :loading="loading">查 询</el-button>
                    <el-button @click="cancelForm">取 消</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    props: {
        jsonObj: {},
    },
    data: function () {
        return {
            curr_jsonObj: [],
            searchData: {},
            table: false,
            dialog: false,
            loading: false,
            timer: null,
            widget_event: null,
            searchTags: [],
            btnType:"default",
        };
    },
    created: function () {
        //补充字段
        this.jsonObj.forEach(element => {
            var item = element;
            if (item.dbrow == 2) {
                for (let index = 0; index < item.item.length; index++) {
                    if (item.item[index].component == "el-select") {
                        item.item[index]["type"] = "2";
                    }
                    else if (item.item[index].component == "el-checkbox") {
                        item.item[index]["type"] = "3";
                    }
                    else if (item.item[index].component == "el-input") {
                        item.item[index]["type"] = "4";
                    }
                    else {
                        item.item[index]["type"] = "1";
                    }
                    if (!item.item[index]["dblclickparm"]) {
                        item.item[index]["dblclickparm"] = "";
                    }
                    item.item[index]["_uid"] = "_uid_" + index + item.item[index].returnParm;
                }
                item["_tid"] = "_tid_2" + item.item[0].returnParm;
            }
            else {
                if (item.component == "el-select") {
                    item["type"] = "2";
                }
                else if (item.component == "el-checkbox") {
                    item["type"] = "3";
                }
                else if (item.component == "el-input") {
                    item["type"] = "4";
                }
                else {
                    item["type"] = "1";
                }
                if (!item["dblclickparm"]) {
                    item["dblclickparm"] = "";
                }
                item["_tid"] = "_tid_" + element.returnParm;
                item["_uid"] = "_uid_" + element.returnParm;
            }
            this.curr_jsonObj.push(item);
        });

        //设置分组数据
        var newArr = [];
        this.curr_jsonObj.forEach((item, i) => {
            var index = -1;
            //根据不同的groupName放置不同的数组
            var isExists = newArr.some((newItem, j) => {
                if (item.groupName == newItem.groupName) {
                    index = j;
                    return true;
                }
            });

            if (!isExists) {
                newArr.push({
                    groupName: item.groupName,
                    subList: [item]
                })
            } else {
                newArr[index].subList.push(item);
            }
            this.curr_jsonObj = newArr
        });
    },
    watch:{
        searchTags() {
            if(this.searchTags.length > 0){
                this.btnType='warning';
            }
            else{
                this.btnType='default';
            }
        }
    },
    methods: {
        showChangeVal(event, type, tdname, refname){
            //设置搜索条件后，传给父页面
            var wordageLimit = 6;
            if(document.body.offsetWidth < 1600 && document.body.offsetWidth >= 1400){
                wordageLimit = 5;
            }if(document.body.offsetWidth < 1400){
                wordageLimit = 4;
            }
            var st_index = this.searchTags.findIndex((item) => {
                return item.refname == refname;
            });
            //检测是否是数字或字母或数字字母混合，包含逗号
            var pattern = /^[A-Za-z0-9,]+$/;
            if(st_index == -1){
                if (type == 'el-select') {
                    //获取selec的显示文字
                    setTimeout(() => {
                        var showLable = this.$refs[refname][0].selectedLabel;
                        if(!showLable){
                            showLable = event;
                        }
                        var displaytxt = showLable;
                        if(pattern.test(displaytxt)){
                            //相差一个数字或者字母的长度不影响
                            wordageLimit = wordageLimit * 1.8;
                        }
                        if(displaytxt.length > wordageLimit){
                            displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                        }
                        let tmp = {
                            displaytxt: displaytxt,
                            title: tdname+'：'+ showLable,
                            tdname: tdname,
                            code: event,
                            name: showLable,
                            refname: refname,
                            type: type,
                        };
                        this.searchTags.push(tmp);
                    }, 1);
                } else if (type == 'el-checkbox') {
                    var displaytxt = tdname;
                    if(pattern.test(displaytxt)){
                        //相差一个数字或者字母的长度不影响
                        wordageLimit = wordageLimit * 1.8;
                    }
                    if(displaytxt.length > wordageLimit){
                        displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                    }
                    let tmp = {
                        displaytxt: displaytxt,
                        title: tdname,
                        tdname: "",
                        code: 1,
                        name: tdname,
                        refname: refname,
                        type: type,
                    };
                    this.searchTags.push(tmp);
                } else if(type == 'el-input') {
                    var displaytxt = event;
                    if(pattern.test(displaytxt)){
                        //相差一个数字或者字母的长度不影响
                        wordageLimit = wordageLimit * 1.8;
                    }
                    if(displaytxt.length > wordageLimit){
                        displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                    }
                    let tmp = {
                        displaytxt: displaytxt,
                        title: tdname + "：" + event,
                        tdname: tdname,
                        code: event,
                        name: "",
                        refname: refname,
                        type: type,
                    };
                    this.searchTags.push(tmp);
                }
                else {
                    //自定义组件
                    var displaytxt = event.name;
                    if(pattern.test(displaytxt)){
                        //相差一个数字或者字母的长度不影响
                        wordageLimit = wordageLimit * 1.8;
                    }
                    if(displaytxt.length > wordageLimit){
                        displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                    }
                    let tmp = {
                        displaytxt: displaytxt,
                        title: tdname + "：" + event.name,
                        tdname: tdname,
                        code: event.code,
                        name: event.name,
                        refname: refname,
                        type: type,
                    };
                    this.searchTags.push(tmp);
                }
            }
            else {
                if (type == 'el-select') {
                    if(event == '' || event == null || event == undefined){
                        //删除
                        this.searchTags.splice(st_index,1);
                    }
                    else {
                        //修改值
                        setTimeout(() => {
                            var showLable = this.$refs[refname][0].selectedLabel;
                            if(!showLable){
                                showLable = event;
                            }
                            var displaytxt = showLable;
                            if(pattern.test(displaytxt)){
                                //相差一个数字或者字母的长度不影响
                                wordageLimit = wordageLimit * 1.8;
                            }
                            if(displaytxt.length > wordageLimit){
                                displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                            }
                            this.searchTags[st_index].code = event;
                            this.searchTags[st_index].name = showLable;
                            this.searchTags[st_index].displaytxt = displaytxt;
                            this.searchTags[st_index].title = tdname+'：'+ showLable;
                        }, 1);
                    }
                } else if (type == 'el-checkbox') {
                    //删除
                    if(!event){
                        this.searchTags.splice(st_index,1);
                    }
                } else if(type == 'el-input') {
                    if(event == '' || event == null || event == undefined){
                        //删除
                        this.searchTags.splice(st_index,1);
                    }
                    else{
                        var displaytxt = event;
                        if(pattern.test(displaytxt)){
                            //相差一个数字或者字母的长度不影响
                            wordageLimit = wordageLimit * 1.8;
                        }
                        if(displaytxt.length > wordageLimit){
                            displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                        }
                        this.searchTags[st_index].code = event;
                        this.searchTags[st_index].displaytxt = displaytxt;
                        this.searchTags[st_index].title = tdname+'：'+ event;
                    }
                }
                else {
                    //自定义组件
                    if(event.code == '' || event.code == null || event.code == undefined){
                        //删除
                        this.searchTags.splice(st_index,1);
                    }
                    else{
                        var displaytxt = event.name;
                        if(pattern.test(displaytxt)){
                            //相差一个数字或者字母的长度不影响
                            wordageLimit = wordageLimit * 1.8;
                        }
                        if(displaytxt.length > wordageLimit){
                            displaytxt = displaytxt.substring(0,wordageLimit) + '...';
                        }
                        this.searchTags[st_index].code = event.code;
                        this.searchTags[st_index].name = event.name;
                        this.searchTags[st_index].displaytxt = displaytxt;
                        this.searchTags[st_index].title = tdname+'：'+ event.name;
                    }
                }
            }
            if (!!this.searchTags) {
                //调用父页面方法，页面显示本组件设置的查询条件
                setTimeout(() => {
                    this.$emit('showAdvancedTags', this.searchTags);
                }, 100);
            }
        },
        dbClickMethod(e, parm) {
            if (parm) {
                //调用父页面通用方法，打开el-dialog
                this.widget_event = e;
                this.$emit('openDialog', parm);
            }
        },
        returnResult() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
            //构建搜索数据
            this.structureData();
            // 子组件给父组件传值，通过 $emit 的方法参数传递
            this.$emit('parentFunc', this.searchData);
        },
        structureData() {
            for (let index = 0; index < this.curr_jsonObj.length; index++) {
                this.curr_jsonObj[index].subList.forEach(element => {
                    if (element.dbrow == 2) {
                        for (let index2 = 0; index2 < element.item.length; index2++) {
                            const element2 = element.item[index2];
                            var val2 = "";
                            if (element2.val != undefined && element2.val != null) {
                                val2 = element2.val;
                            }
                            this.searchData[element2.returnParm] = val2;
                        }
                    }
                    else {
                        var val = "";
                        if (element.val != undefined && element.val != null) {
                            val = element.val;
                        }
                        this.searchData[element.returnParm] = val;
                    }
                });
            }
        },
        getSerchData() {
            //获取搜索数据
            this.structureData();
            return this.searchData;
        },
        setSerchData(modle_val,result){
            //给变量赋值
            for (let index = 0; index < this.curr_jsonObj.length; index++) {
                for (let index2 = 0; index2 < this.curr_jsonObj[index].subList.length; index2++) {
                    const element = this.curr_jsonObj[index].subList[index2];
                    if (element.dbrow == 2) {
                        for (let index3 = 0; index3 < element.item.length; index3++) {
                            const element2 = element.item[index3];
                            if (element2.returnParm == modle_val) {
                                this.curr_jsonObj[index].subList[index2].item[index3].val = result;
                            }
                        }
                    }
                    else {
                        if (element.returnParm == modle_val) {
                            this.curr_jsonObj[index].subList[index2].val = result;
                        }
                    }
                }
            }
        },
        cleaSelData(tag){
            //清除指定搜索条件
            for (let index = 0; index < this.curr_jsonObj.length; index++) {
                for (let index2 = 0; index2 < this.curr_jsonObj[index].subList.length; index2++) {
                    const element = this.curr_jsonObj[index].subList[index2];
                    if (element.dbrow == 2) {
                        for (let index3 = 0; index3 < element.item.length; index3++) {
                            if(this.curr_jsonObj[index].subList[index2].item[index3].returnParm == tag.refname){
                                this.curr_jsonObj[index].subList[index2].item[index3].val = '';
                            }
                        }
                    }
                    else {
                        if(this.curr_jsonObj[index].subList[index2].returnParm == tag.refname){
                            this.curr_jsonObj[index].subList[index2].val = '';
                        }
                    }
                }
            }
            //删除数组里的搜索条件
            var index = this.searchTags.findIndex(m => m.refname == tag.refname);
            if(index != -1){
                this.searchTags.splice(index, 1);
            }
        },
        cleaSerchData(){
            //清除搜索条件
            this.searchTags = [];
            for (let index = 0; index < this.curr_jsonObj.length; index++) {
                for (let index2 = 0; index2 < this.curr_jsonObj[index].subList.length; index2++) {
                    const element = this.curr_jsonObj[index].subList[index2];
                    if (element.dbrow == 2) {
                        for (let index3 = 0; index3 < element.item.length; index3++) {
                            this.curr_jsonObj[index].subList[index2].item[index3].val = '';
                        }
                    }
                    else {
                        this.curr_jsonObj[index].subList[index2].val = '';
                    }
                }
            }
        },
        postDialogData(modle_val, result) {
            //获取父页面所传过来的数据，并赋值
            this.widget_event.target.value = result;
            //给双击事件绑定的变量赋值
            for (let index = 0; index < this.curr_jsonObj.length; index++) {
                for (let index2 = 0; index2 < this.curr_jsonObj[index].subList.length; index2++) {
                    const element = this.curr_jsonObj[index].subList[index2];
                    if (element.dbrow == 2) {
                        for (let index3 = 0; index3 < element.item.length; index3++) {
                            const element2 = element.item[index3];
                            if (element2.dblclickparm == modle_val) {
                                this.curr_jsonObj[index].subList[index2].item[index3].val = result;
                                if(element2.component =='el-select'){
                                    //下拉框多选事件
                                    this.showChangeVal(result, 'el-select', element2.text, modle_val);
                                }
                            }
                        }
                    }
                    else {
                        if (element.dblclickparm == modle_val) {
                            this.curr_jsonObj[index].subList[index2].val = result;
                            if(element.component =='el-select'){
                                //下拉框多选事件
                                this.showChangeVal(result, 'el-select', element.text, modle_val);
                            }
                        }
                    }
                }
            }
        },
        cancelForm() {
            //清空返回的搜索数据
            this.searchData = {};
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
    },

    // 双列数据举例：
    // jsonObj: [{
    //     dbrow: 2, groupName: "医院信息", item: [
    //         { text: "条码号", returnParm: "sel_barcode", component: "el-input", pops: { style: "width: 200px" } },
    //         { text: "样本号", groupName: "医院信息", returnParm: "sel_sampleno", component: "el-input", pops: { style: "width: 200px", placeholder: "输入如1,2,5-8等格式" } },
    //     ]
    // },
    // { text: "病历号", groupName: "病人信息", returnParm: "sel_patno", component: "el-input", pops: { style: "width: 200px" } },
    // { text: "姓名", groupName: "病人信息", returnParm: "sel_patname", component: "el-input", pops: { style: "width: 200px" } },
    // { text: "病人床号", groupName: "病人信息", returnParm: "sel_reqbedno", component: "el-input", pops: { style: "width: 200px" } },
    // { text: "病人卡号", groupName: "病人信息", returnParm: "sel_patcardno", component: "el-input", pops: { style: "width: 200px" } },
    // {
    //     text: "自动审核", groupName: "医院信息", returnParm: "sel_chkflag", component: "el-select", pops: { style: "width: 200px" }, selectOptions: [
    //         { label: "全部", value: "all" },
    //         { label: "待审核", value: "0" },
    //         { label: "审核通过", value: "1" },
    //         { label: "审核不通过", value: "2" },
    //         { label: "不参与审核", value: "9" },]
    // }]

    // 双击多选框数据举例
    // jsonObj: [
    //     { text: "耐药机制", groupName: "医院信息", dblclickparm: "sel_result4", returnParm: "sel_result4", component: "el-select", pops: { style: "width: 200px", placeholder: "请选择" }, selectOptions: [] },
    //     { text: "条码号", groupName: "医院信息", returnParm: "sel_barcode", component: "el-input", pops: { style: "width: 200px" } },
    //     { text: "病历号", groupName: "病人信息", returnParm: "sel_patno", component: "el-input", pops: { style: "width: 200px" } },
    //     { text: "姓名", groupName: "病人信息", returnParm: "sel_patname", component: "el-input", pops: { style: "width: 200px" } },
    //     { text: "病人床号", groupName: "病人信息", returnParm: "sel_reqbedno", component: "el-input", pops: { style: "width: 200px" } },
    //     { text: "样本号", groupName: "医院信息", returnParm: "sel_sampleno", component: "el-input", pops: { style: "width: 200px", placeholder: "输入如1,2,5-8等格式" } }]
};
</script>
<style scoped>
/*显示滚动条：当内容超出容器的时候，可以拖动：*/
::v-deep .el-drawer__body {
    overflow: auto;
}

/* 隐藏滚动条 */
/* ::v-deep .el-drawer__container ::-webkit-scrollbar {
    display: none;
} */

/* 中间主体样式 */
::v-deep .drawer__form {
    /* 隐藏x轴滚动条 */
    overflow-x: hidden;
    overflow-y: auto;
    /* 用屏幕可视高度减去 头部与底部的高度，就是中间元素的高度 */
    height: calc(100vh - 60px);
}

/* el-drawer的Title样式 */
::v-deep .el-drawer__header {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    padding: 2px;
}

/* 分组样式 */
::v-deep .group {
    background-color: #bdd3f0;
    text-align: left;
    line-height: 21px;
    height: 22px;
}

::v-deep .groupspan {
    font-weight: 400;
    padding-left: 10px;
    font-size: 15px;
}

/* 按钮样式 */
::v-deep .drawer__footer {
    margin-left: 5px;
    text-align: left;
    line-height: 30px;
}

::v-deep .drawer_td {
    margin: 0;
    padding: 1px;
}
</style>
